<template>
	<view>
		<view class="list-box" v-for="(item, index) in list"
			@click="$ut.route('pages/order/orderDetails',{id: item.id,current: current})" :index="index">
			<view class="flex items-center">
				<view class="fFont f-waimai font-58 mr-12" style="color: #ffbc42;" />
				<view>
					<view class="header-box">
						<view class="status line-1">
							<text class="mr-12 font-bold">{{item.shopInfo.name}}</text>
							<u-icon size="24" name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="flex items-center mt-12">
						<view v-for="(rules, ruleKey) in item.shopInfo.shopRuleList">
							<template v-if="rules.type == 1">
								<u-tag class="mr-12" :text="`${rules.reachPrice}送${rules.givePrice}`" border-color="#ff7920"
									color="#ff7920" size="mini" mode="plain" />
							</template>
							<template v-if="rules.type == 2">
								<u-tag class="mr-12" :text="`${rules.reachPrice}减${rules.givePrice}`" border-color="#ffbc42"
									color="#d99b38" size="mini" mode="plain" />
							</template>
						</view>
					</view>
				</view>
			</view>
			<view class="status-box font-28">{{ item.wholeUserState | setStatus }}</view>
			<view class="content-box flex items-center justify-between">
				<scroll-view scroll-x class="scroll-view_H">
					<view class="flex">
						<view class="mr-12 goods-box" v-for="(items, key) in item.orderTakeawayCommodityList">
							<template v-if="item.orderTakeawayCommodityList.length < 1">
								<view class="flex items-center">
									<u-image :src="$ut.setImgae(items.shopCommodity.image)" width="160" height="120"
										border-radius="20"></u-image>
									<view class="goods-names font-26 font-bold">{{ items.shopCommodity.name }}</view>
								</view>
							</template>
							<template v-else>
								<u-image :src="$ut.setImgae(items.shopCommodity.image)" width="160" height="120"
									border-radius="20"></u-image>
								<view class="goods-name font-24 mt-12">{{ items.shopCommodity.name }}</view>
							</template>
						</view>
					</view>
				</scroll-view>
				<view class="price-box-style"
					:style="{height: item.orderTakeawayCommodityList.length <= 1 ? '120rpx' : '160rpx'}">
					<view class="price-box">
						<view class="flex items-center justify-center flex-column">
							<view class="mt-12">共{{ item.orderTakeawayCommodityList.length }}件</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flex items-center justify-between font-26 mt-30">
				<view class="grey-middle mt-12 font-24">
					下单时间: {{ item.payTime || item.createTime }}
				</view>
				<view>
					<text class="grey-middle">合计</text>
					<text class="font-36 font-bold">￥{{ item.price }}</text>
				</view>
			</view>

			<view class="flex justify-end mt-30">
				<template v-if="item.payState == 1 && item.shopState == 0 && item.deliveryState == 0">
					<view class="btn-box" type="chargeback" hover-class="hover-class" hover-stay-time="150"
						@click.stop="userApplyOrderTakeawayCancellation(item, index)">取消订单</view>
				</template>
				<template v-if="item.payState == 3">
					<view class="btn-box" type="chargeback" hover-class="hover-class" hover-stay-time="150"
						@click.stop="userApplyOrderTakeawayCancellation(item, index)">平台审核</view>
				</template>
				<template v-if="item.payState == 0 && item.deliveryState == 0 && setCountDownTime(item.createTime) >= 0">
					<view class="btn-box" type="pay" hover-class="hover-class" hover-stay-time="150">
						<text class="mr-12">立即支付</text>
						<fui-count-down size="24" colonSize="24" borderColor="#f0ad4e" background="rgba(255,255,255, .5)" color="#666"
							colonColor="#999" :value="setCountDownTime(item.createTime)" width="50"></fui-count-down>
					</view>
				</template>
				<template v-if="item.payState == 0 && item.deliveryState == 0 && setCountDownTime(item.createTime) < 0">
					<view class="btn-box" type="notPay" hover-class="hover-class" hover-stay-time="150" @click.stop="notPay()">
						<text class="mr-12">支付时效已过</text>
					</view>
				</template>
				<template v-if="item.payState == 1 && item.deliveryState == 3 && item.shopState == 2">
					<view class="btn-box" type="service" hover-class="hover-class" hover-stay-time="150">确认送达</view>
				</template>
				<template v-if="item.payState == 2 && item.deliveryState == 3">
					<view v-if="item.isEvaluate != 1" class="btn-box" hover-class="hover-class" hover-stay-time="150"
						@click.stop="toComment(item)">评价</view>
					<view class="btn-box" type="chargeback" hover-class="hover-class" hover-stay-time="150" @click.stop>申请投诉
					</view>
				</template>
			</view>
		
		</view>
	</view>
</template>

<script>
	import fuiCountDown from '@/components/fui-count-down/fui-count-down.vue';
	export default {
		name: 'orderList',
		// 对接口的时候这儿删除就行了
		data() {
			return {
				man: true,
				itemList: [{
					head: "商品",
					body: "只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来",
					open: true,
					disabled: true
				}],
			}
		},
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			current: {
				type: [Number, String],
				default: 0
			}
		},
		filters: {
			setStatus(val) {
				let statusText;
				switch (val) {
					case 0:
						statusText = '待支付'
						break;
					case 1:
						statusText = '待完成'
						break;
					case 2:
						statusText = '待评价'
						break;
					case 3:
						statusText = '退款/售后'
						break;
					default:
						statusText = '已完成'
						break;
				}
				return statusText;
			}
		},
		components: {
			fuiCountDown
		},
		methods: {
			// 支付失效已过
			notPay(){
				uni.showToast({
					title: '支付失效已过',
					image: '/static/icon/error.png'
				})
			},
			// 获取倒计时秒数
			setCountDownTime(date) {
				const coefficient = 60 * 10;
				const timestamp = new Date().getTime();
				const standardDate = new Date(date);
				const orderCreateTime = this.dateToTimestamp(standardDate);
				const countDownTime = coefficient - (timestamp / 1000 - orderCreateTime / 1000);
				return countDownTime;
			},
			// 获取时间戳
			dateToTimestamp(standardDate) {
				return standardDate.getTime();
			},
			// 取消订单
			userApplyOrderTakeawayCancellation(item, index) {
				const {
					id,
					payState,
					shopInfo
				} = item;
				if (payState == 3) return this.$u.toast('等待平台审核...');
				this.$ut.route('pages/order/cancelOrder',{
					orderTakeawayId: id,
					shopId: shopInfo.id,
					index
				})
				return false;
				this.$u.api.userApplyOrderTakeawayCancellation({
					orderTakeawayId: id
				}).then(res => {
					uni.showToast({
						title: '申请成功，等待平台审核'
					})
					this.list[index].payState = 3;
				})
			},
			// 去评论
			toComment(item) {
				const {
					id
				} = item;
				this.$ut.route('pages/comment/create', {
					id
				});
			},
			// 拨打电话
			callTel(tel) {
				if (!(this.current === 0 || this.current == 1)) return false;
				// #ifndef H5
				uni.makePhoneCall({
					phoneNumber: tel,
					success: function() {
						uni.showToast({
							title: '请稍等，拨通中',
							duration: 1200
						});
					},
					fail: function() {
						uni.showToast({
							title: '您已取消拨打',
							duration: 1200
						});
					}
				})
				// #endif
				// #ifdef H5
				window.location.href = 'tel:' + tel;
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f8f8f8;
	}

	.btn-box {
		border: 1rpx solid #c7c7c7;
		padding: 8rpx 24rpx;
		font-size: 26rpx;
		border-radius: 16rpx;
		margin-left: 12rpx;
	}

	.btn-box[type='chargeback'] {
		border-color: $uni-color-error;
		color: $uni-color-error;
	}

	.btn-box[type='service'] {
		border-color: $uni-color-primary;
		color: $uni-color-primary;
	}

	.btn-box[type='pay'] {
		border-color: $uni-color-warning;
		background-color: $uni-color-warning;
		color: #333;
		font-weight: bold;
	}
	
	.btn-box[type='notPay'] {
		border-color: #fff;
		background-color: $font-color-base;
		color: #fff;
		font-weight: bold;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;

		.goods-box {
			text-align: center;
		}
	}

	.goods-names {
		width: 380rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: left;
		margin-left: 24rpx;
	}

	.goods-name {
		width: 160rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.list-box {
		box-shadow: 0 2rpx 16rpx rgba($color: #333, $alpha: .2);
		margin: 32rpx;
		border-radius: 16rpx;
		padding: 30rpx;
		background-color: #ffffff;
		position: relative;

		.status-box {
			position: absolute;
			top: 32rpx;
			right: 30rpx;
			color: $font-color-gray-middle;
		}

		.header-box {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.status {
				font-size: 30rpx;
				font-weight: bold;
			}

			.price {
				font-size: 38rpx;
				color: #fa3d4c;

				&::before {
					content: '¥';
					font-size: 24rpx;
					margin-right: 4rpx;
				}
			}
		}

		.content-box {
			margin-top: 24rpx;
			// background: linear-gradient(to right, #f6f6f6, #ffffff);
			border-radius: 8rpx;
			position: relative;
			// padding: 24rpx;

			.price-box-style {
				position: absolute;
				right: 0;
				top: 0;
				background-color: rgba(255, 255, 255, .6);
				// width: 24rpx;
				text-align: center;
				height: 160rpx;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.price-box {}
			}

			.title {
				border-bottom: 1rpx dashed #eaeaea;
				padding-bottom: 12rpx;

				.isMan {
					color: #8DA0FE !important;
				}

				.isWoman {
					color: #FF8C8F;
				}
			}

			.status-start {
				background-color: $uni-color-primary;
				color: #ffffff;
				border-radius: 16rpx;
				font-size: 24rpx;
				padding: 4rpx 8rpx;
				display: inline-block;
			}

			.status-end {
				background-color: #f0be58;
				color: #ffffff;
				border-radius: 16rpx;
				font-size: 24rpx;
				padding: 4rpx 8rpx;
				display: inline-block;
			}
		}

		.info-box {
			margin-top: 8rpx;
			margin-left: 24rpx;

			.store-name {
				font-size: 32rpx;
				font-weight: bold;
			}

			.address-name {
				color: #999;
				font-size: 24rpx;
			}

			.overSize {
				display: -webkit-box;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}

		.revokeOrder {
			font-size: 30rpx;
			padding: 12rpx 24rpx;
			border-radius: 50rpx;
			border: 1rpx solid #d8d8d8;
		}

		.grabOrder {
			background: linear-gradient(to right, #5375f4, #555ff5);
			color: #ffffff;
			font-size: 30rpx;
			padding: 12rpx 24rpx;
			border-radius: 50rpx;
			border: 1rpx solid #555ff5;
		}
	}

	.scroll-x-box {
		white-space: nowrap;
		width: 100%;
		display: flex;
	}

	::v-deep {
		.u-collapse-head {
			font-size: 28rpx;
		}

		.u-size-mini {
			padding: 4rpx 6rpx;
		}
	}
</style>